<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 步骤2: 引入react 核心库文件. 相当于vue.js  提供了React-->
    <script src="../js/react.js"></script>
    <!-- 引入 react-dom.js 该文件是使用操作dom的核心文件 提供了ReactDOM-->
    <script src="../js/react-dom.js"></script>
</head>

<body>
    <!-- 步骤1: 在网页中添加一个react 根节点, 该节点内最后可以使用react 语法. 外边不行 -->
    <div id="root">
        <!-- 该位置可以使用react 语法 -->
    </div>
</body>

</html>
<script>
    // 步骤3:
    // 获取根节点
    let rootDOM = document.querySelector('#root');
    // 使用 react-dom.js 中提供的ReactDOM 对象中的createRoot创建react 根实例 
    // 相当于vue中的   const app =  createApp()
    const root = ReactDOM.createRoot(rootDOM);
    // console.log('ReactDOM', ReactDOM);
    // console.log('root', root);
    // console.log('React', React);
    // 使用root 根实例提供的render 方法 渲染 react 组件dom
    // 语法: React.createElement('要创建的节点',该节点的属性,该节点的子节点)
    // root.render(React.createElement('div', { id: 100 }, '我是div元素'))
    root.render(React.createElement('div', { id: 100 }, React.createElement('p', {}, '我是p元素')))


</script>